  <template>
    <div class="order-confirm-container">
      <div class="order-confirm__bg">
        <van-nav-bar class="order-confirm__back" title="" left-text="返回" left-arrow v-back />
        <div class="order-confirm__address">
          <div class="order-confirm__address__sub">订单配送至</div>
          <div class="order-confirm__address__main">
            <div class="order-confirm__address__text">{{(stationInfo.region + stationInfo.address).replace(/\s+/g, "")}}
            </div>
          </div>
          <div class="order-confirm__address__other">
            {{stationInfo.name}}&nbsp;{{stationInfo.phone}}
          </div>
        </div>
      </div>
      <div class="address-info__content">
        <div class="address-info">
          <div class="address-info__stationname">进货列表</div>
          <div class="address-info__product">
            <div class="address-info__product__item" v-for="item in showCartList">
              <div class="address-info__product__el address-info__product__item__img"
                v-bind:style="{backgroundImage: 'url(' + item.icon + ')'}"></div>
              <div class="address-info__product__item__info">
                <div class="address-info__product__item__info__el">
                  <div class="address-info__product__el address-info__product__item__name">{{item.name}}</div>
                  <div class="address-info__product__el address-info__product__item__num">x{{item.count}}</div>
                  <div class="address-info__product__el address-info__product__item__price">
                    ￥{{(item.price).toFixed(1)}}</div>
                </div>
                <!-- <div class="address-info__product__item__info__el address-info__product__item__info__el_bucket">
                  <div class="address-info__product__el address-info__product__item__name" style="flex: 0 0 70px;">水桶押金
                  </div>
                  <div class="address-info__product__el address-info__product__item__price"
                    style="flex: 1;text-align: right">
                    <template v-if="payType == 1">
                      ￥{{(item.bucketPrice * item.count).toFixed(1)}}
                    </template>
                    <template v-if="payType == 0">
                      ￥{{(item.buyPrice * item.count).toFixed(1)}}
                    </template>
                  </div>
                </div> -->
              </div>
            </div>
            <div class="address-info__product__item address-info__product__item_more" @click="showMoreCart"
              v-show="cartList.length > 3">
              {{this.showMore ? '收起' : '查看更多'}}
            </div>
            <div class="station-send__rule">
              {{sendRule}}
            </div>
            <div class="address-info__product__count">
              <div class="address-info__product__count__discount">
                已优惠<span class="price">￥0</span>
              </div>
              <div class="address-info__product__count__total">
                小计<span class="price">￥{{totalPrice}}</span>
              </div>
            </div>
          </div>
        </div>
         <!-- @click="showPayType" -->
        <div class="address-info">
          <van-cell class="payway" title="支付方式" :value="payTypeName" :default-index="0" />
        </div>
        <div class="address-info" @click="showPayBucketType">
          <van-cell class="payway" title="押桶方式" is-link
            :value="payBucketTypeChk.length == 0 ? '请选择押桶方式' : payBucketTypeChk.toString()" />
        </div>
        <!-- <div class="address-info" v-show="payBucketType == 0">
          <van-cell title="兑桶信息" @click.native="chooseBucket" :value="bucketPrice" is-link />
        </div> -->
        <!-- 空桶兑换列表 -->
        <!-- <div class="address-info" v-show="isShowEmptyChangeTit && payBucketType !== 1">
          <div class="bucket-data__type">空桶兑换<van-icon name="arrow"></van-icon></div>
          <div class="bucket-data__item" v-for="item in bucketData" v-if="item.emptyChange !== 0">
            <div class="bucket-data__item__name">{{item.bucketName}}</div>
            <div class="bucket-data__item__count">x{{item.emptyChange}}</div>
            <div class="bucket-data__item__price">￥{{(item.bucketPrice * item.emptyChange).toFixed(1)}}</div>
          </div>
        </div> -->
        <!-- 换桶兑换列表 -->
        <!-- <div class="address-info" v-show="isShowBucketChangeTit && payBucketType !== 1">
          <div class="bucket-data__type">换桶兑换<van-icon name="arrow"></van-icon></div>
          <div class="bucket-data__item" v-for="item in bucketData" v-if="item.bucketChange !== 0">
            <div class="bucket-data__item__name">{{item.bucketName}}</div>
            <div class="bucket-data__item__count">x{{item.bucketChange}}</div>
            <div class="bucket-data__item__price">￥{{(item.bucketPrice * item.bucketChange * 0.7).toFixed(1)}}</div>
          </div>
        </div> -->
        <!-- 欠桶或者押桶列表 -->
        <!-- <div class="address-info" v-show="isShowDebtList">
          <div class="bucket-data__type">{{exchangeBucketType == 0 ? '欠桶列表' : '押桶列表'}}<van-icon name="arrow"></van-icon></div>
          <div class="bucket-data__item" v-if="bucketData.length !== 0 && (item.count - (item.emptyChange + item.bucketChange) > 0)" v-for="item in bucketData">
            <div class="bucket-data__item__name">{{item.bucketName}}</div>
            <div class="bucket-data__item__count">x{{item.count - (item.emptyChange + item.bucketChange)}}</div>
            <div class="bucket-data__item__price">￥{{(item.bucketPrice * (item.count - (item.emptyChange + item.bucketChange))).toFixed(1)}}</div>
          </div>
          <div class="bucket-data__item" v-if="bucketData.length == 0" v-for="item in cartList">
            <div class="bucket-data__item__name">{{item.bucketName}}</div>
            <div class="bucket-data__item__count">x{{item.count}}</div>
            <div class="bucket-data__item__price">￥{{(item.bucketPrice * item.count).toFixed(1)}}</div>
          </div>
        </div> -->
        <!-- <div class="address-info" @click="showExchangeBucketType" v-show="payBucketType == 0">
          <van-cell class="payway" title="押桶方式" is-link :value="exchangeBucketTypeName" :default-index="0" />
        </div> -->
        <div class="address-info">
          <van-cell-group>
            <van-field placeholder="请填写订单备注" v-model="remark" type="textarea" />
          </van-cell-group>
        </div>
      </div>
      <div class="order-confirm__cal">
        <!-- <div class="order-confirm__detail">含水费:￥{{waterPrice}}+水桶押金:￥{{calcuBucketPrice}}</div> -->
        <div class="order-confirm__total">
          <!-- <span class="order-confirm__total__detail">
            <van-icon name="notes-o"></van-icon>明细
          </span> -->
          <span class="order-confirm__total__text">合计</span>
          <span class="order-confirm__total__price">￥{{totalPrice}}</span>
        </div>
        <div class="order-confirm__btn" @click="submitOrder">
          提交订单
        </div>
      </div>
      <van-popup v-model="payTypeShow" position="bottom">
        <van-picker :columns="columns" show-toolbar @confirm="confirmPayType" @cancel="hidePayType" />
      </van-popup>
      <van-popup v-model="payBucketTypeShow" position="bottom">
        <!-- <div class="popup-bar">
          <div class="popup-bar__cancel">取消</div>
          <div class="popup-bar__confirm">确认</div>
        </div> -->
        <div class="pay-bucket-tit">请选择押桶方式</div>
        <van-checkbox-group v-model="payBucketTypeChk">
          <van-cell-group>
            <van-cell v-for="(item, index) in bucketColumns" clickable :key="item" :title="`${item}`"
              @click="toggle(index)">
              <van-checkbox :name="item" ref="checkboxes" />
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
        <!-- <van-picker :columns="bucketColumns" show-toolbar @confirm="confirmPayBucketType" @cancel="hidePayBucketType" /> -->
      </van-popup>
      <!-- <van-popup v-model="exchangeBucketTypeShow" position="bottom">
        <van-picker :columns="exchangeBucketColumns" show-toolbar @confirm="confirmExchangeBucketType"
          @cancel="hideExchangeBucketType" />
      </van-popup> -->
      <transition name="fold">
        <div class="bucket-container" v-show="bucketChooseShow">
          <stock-bucket @cancel="bucketCancel" @confirm="bucketConfirm" :bucketList="cartList"></stock-bucket>
        </div>
      </transition>
      <div class="picker-mask" v-show="bucketChooseShow"></div>
    </div>
  </template>

  <script>
    import {
      SUBMIT_ORDER
    } from '@/api/stock'
    import StockBucket from '@/components/StockBucket'
    import {
      mapState
    } from 'vuex';
    export default {
      data() {
        return {
          cartList: [],
          remark: '',
          body: '这是一张测试订单',
          payType: 1,
          payBucketType: '',
          exchangeBucketType: 0,
          payTypeName: '线下支付',
          payBucketTypeName: '',
          // exchangeBucketTypeName: '欠桶抵押',
          columns: ['线上支付', '线下支付'],
          bucketColumns: ['押桶', '还桶', '买桶'],
          // exchangeBucketColumns: ['欠桶抵押', '押桶购买'],
          showMore: false,
          payTypeShow: false,
          payBucketTypeShow: false,
          bucketChooseShow: false, //押桶选择展示
          exchangeBucketTypeShow: false, //兑桶选择展示
          bucketData: [],
          payBucketTypeChk: [],
          payBucketTypeChkVal: [],
          center: [113.070948,28.218496]
        }
      },
      components: {
        StockBucket
      },
      computed: {
        ...mapState(['stationInfo']),
        //判断配送规则
        sendRule(){
          if(this.stationInfo.send && this.stationInfo.send.id !== 0){
            if(this.stationInfo.send.id == 1){
              if(this.bucketNum < this.stationInfo.send.num){
                return '配送规则：不满足配送桶数' + (this.stationInfo.send.num) + '桶，每桶水将加收' + this.stationInfo.send.price + '元';
              }else{
                return '';
              }
            }else{
              if(this.geoDistance > this.stationInfo.send.num){
                return '配送规则：超出配送范围' + (this.geoDistance - this.stationInfo.send.num).toFixed(1) + 'km，每桶水将加收' + this.stationInfo.send.price + '元';
              }else{
                return '';
              }
            }
             
          }else{
            return '';
          }
        },
        //订购水桶书
        bucketNum(){
          let count = 0;
          this.cartList.forEach(el => {
            count += el.count;
          });
          return count;
        },
        //判断距离水厂距离
        geoDistance() {
          let radLat1 = this.rad(this.center[1]);
          let radLat2 = this.rad(this.stationInfo.latitude);
          let a = radLat1 - radLat2;
          let b = this.rad(this.center[0]) - this.rad(this.stationInfo.longitude);
          let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math
            .pow(Math.sin(b / 2), 2)));
          s = s * 6378.137; // EARTH_RADIUS;
          s = Math.round(s * 10000) / 10000; //输出为公里
          return s;
        },
        showCartList() {
          if (!this.showMore) {
            return this.cartList.slice(0, 3);
          } else {
            return this.cartList;
          }
        },
        //总价
        totalPrice() {
          let price = 0;
          this.cartList.forEach(el => {
            let itemPrice = el.price;
            if(this.stationInfo.send && this.stationInfo.send.id !== 0){
              if(this.stationInfo.send.id == 1){
                if(this.bucketNum < this.stationInfo.send.num){
                  itemPrice += this.stationInfo.send.price;
                }
              }else{
                if(this.geoDistance > this.stationInfo.send.num){
                  itemPrice += this.stationInfo.send.price;
                }
              }
            }
            
            price += (el.count * itemPrice);
            // if (this.payType == 0) {
            //   price += (el.count * el.buyPrice);
            // } else {
            //   price += (el.count * el.bucketPrice);
            // }
          });
          //抵消价格
          // if (this.payBucketType == 0) {
          //   if (this.bucketData.length !== 0) {
          //     this.bucketData.forEach(el => {
          //       //空桶兑换
          //       price -= el.emptyChange * el.bucketPrice;
          //       //换桶兑换抵消0.7
          //       price -= (el.bucketChange * el.bucketPrice) * 0.7;
          //     });
          //     //押桶购买需要支付空桶换桶未选择的水桶费用
          //     if(this.exchangeBucketType == 0){
          //       this.bucketData.forEach(el => {
          //         price -= el.bucketPrice * (el.count - el.emptyChange - el.bucketChange)
          //       });
          //     }
          //   }else{
          //     //欠桶直接返回水的费用
          //     if(this.exchangeBucketType == 0){
          //       return this.waterPrice;
          //     }
          //   }
          // }
          return price.toFixed(2);
        },
        //兑桶返回金额
        bucketPrice() {
          if (this.bucketData.length !== 0) {
            let str = 0;
            this.bucketData.forEach(el => {
              //空桶兑换
              str += el.emptyChange * el.bucketPrice;
              //换桶兑换抵消0.7
              str += (el.bucketChange * el.bucketPrice) * 0.7;
            });
            return '兑桶已返还' + str.toFixed(2) + '元'
          } else {
            return ''
          }
        },
        //水费
        waterPrice() {
          let price = 0;
          this.cartList.forEach(el => {
            price += (el.count * el.price);
          });
          return price.toFixed(1);
        },
        //水桶实际费用
        calcuBucketPrice() {
          let price = 0;
          if (this.payType == 0) {
            this.cartList.forEach(el => {
              // price += (el.count * el.price);
              price += (el.count * el.buyPrice);
            });
          } else {
            this.cartList.forEach(el => {
              // price += (el.count * el.price);
              price += (el.count * el.bucketPrice);
            });
          }
          //买桶
          // if(this.payBucketType == 1){
          //   this.cartList.forEach(el => {
          //     price += (el.count * el.buyPrice);
          //   });
          // }else{
          // //押桶
          // this.cartList.forEach(el => {
          //   price += (el.count * el.bucketPrice);
          // });
          // //抵消价格
          // if (this.bucketData.length !== 0) {
          //   this.bucketData.forEach(el => {
          //     //空桶兑换
          //     price -= el.emptyChange * el.bucketPrice;
          //     //换桶兑换抵消0.7
          //     price -= (el.bucketChange * el.bucketPrice) * 0.7;
          //   });

          //   if(this.exchangeBucketType == 0){
          //     this.bucketData.forEach(el => {
          //       price -= el.bucketPrice * (el.count - el.emptyChange - el.bucketChange)
          //     });
          //   }
          // }else{
          //   //欠桶返回0
          //   if(this.exchangeBucketType == 0){
          //     return 0;
          //   }
          // }
          // }
          console.log(price)
          return price;
        },
        //换桶空桶兑换标题
        isShowEmptyChangeTit() {
          let count = 0;
          this.bucketData.forEach(el => {
            count += el.emptyChange;
          });
          return count == 0 ? false : true;
        },
        isShowBucketChangeTit() {
          let count = 0;
          this.bucketData.forEach(el => {
            count += el.bucketChange;
          });
          return count == 0 ? false : true;
        },
        //是否存在欠桶或者押桶记录
        hasExchangeBucket() {
          let count = 0;
          this.bucketData.forEach(el => {
            if (el.count > (el.emptyChange + el.bucketChange)) {
              count++;
            }
          });
          return count == 0 ? false : true;
        },
        //是否显示欠桶换桶列表
        isShowDebtList() {
          if (this.bucketData.length == 0) {
            return true;
          } else {
            let count = 0;
            this.bucketData.forEach(el => {
              count += el.count - (el.bucketChange + el.emptyChange);
            });
            return count == 0 ? false : true;
          }
        }
      },
      mounted() {
        if (sessionStorage.getItem('cartData') !== null) {
          let cartList = JSON.parse(sessionStorage.getItem('cartData'));
          this.cartList = cartList;
        }
      },
      methods: {
        rad(d) {
          return d * Math.PI / 180.0;
        },
        //提交订单
        submitOrder() {
          if (this.payBucketTypeChkVal.length == 0) {
            this.$toast('请选择押桶方式');
            return false;
          }

          //清空缓存购物车
          sessionStorage.removeItem('cartData')

          let water = [];
          this.cartList.forEach(el => {
            water.push({
              waterId: el.id,
              waterNum: el.count
            })
          });

          //水桶押金方式
          let exchange = this.payBucketTypeChkVal.map(el => {
            return el + 1;
          })
          let params = {
            water: water,
            openid: sessionStorage.getItem('openid'),
            token: sessionStorage.getItem('token'),
            body: this.body,
            remark: this.remark,
            stationId: this.stationInfo.id,
            payType: this.payType,
            exchange: exchange.toString()
          }

          //押桶
          // if (this.payBucketType == 0) {
          //   let bucketEmptyList = [], bucketExChangeList = [], bucketDebtList = [], bucketBuyList = [];
          //   if (this.bucketData.length !== 0) {
          //     this.bucketData.forEach(el => {
          //       //空桶兑换
          //       if(el.emptyChange !== 0){
          //         bucketEmptyList.push({
          //           bucketId: el.bucketId,
          //           bucketNum: el.emptyChange
          //         });
          //       }
          //       //换桶兑换
          //       if(el.bucketChange !== 0){
          //         bucketExChangeList.push({
          //           bucketId: el.bucketId,
          //           bucketNum: el.bucketChange,
          //           sum: el.bucketPrice * 0.3
          //         });
          //       }

          //       //是否存在欠桶或者押桶
          //       if(el.count - el.emptyChange - el.bucketChange > 0){
          //         if(this.exchangeBucketType == 0){
          //           bucketDebtList.push({
          //             bucketId: el.bucketId,
          //             bucketNum: el.count - el.emptyChange - el.bucketChange
          //           })
          //         }else{
          //           bucketBuyList.push({
          //             bucketId: el.bucketId,
          //             bucketNum: el.count - el.emptyChange - el.bucketChange
          //           })
          //         }
          //       }
          //     });
          //   } else {
          //     //押桶或者押金买桶
          //     this.cartList.forEach(el => {
          //       if(this.exchangeBucketType == 0){
          //         bucketDebtList.push({
          //           bucketId: el.bucketId,
          //           bucketNum: el.count
          //         })
          //       }else{
          //         bucketBuyList.push({
          //           bucketId: el.bucketId,
          //           bucketNum: el.count
          //         })
          //       }
          //     });
          //   }

          //   params.bucketEmptyList = bucketEmptyList;
          //   params.bucketExChangeList = bucketExChangeList;
          //   params.bucketDebtList = bucketDebtList;
          //   params.bucketBuyList = bucketBuyList;
          // }


          this.$reqPost(SUBMIT_ORDER, params).then(res => {
            if (this.payType == 0) {
              this.$router.replace({
                name: 'stockPay',
                params: res.data,
                query: {
                  time: new Date().getTime()
                }
              })
            } else {
              this.$router.replace({
                name: 'stockPaySuccessOffline',
                query: {
                  num: res.data.orderNo
                }
              })
            }
          }).catch(err => {
            this.$toast('提交失败');
          });
        },
        //展示更多
        showMoreCart() {
          this.showMore = !this.showMore;
        },
        showPayType() {
          this.payTypeShow = true;
        },

        hidePayType() {
          this.payTypeShow = false;
        },
        //支付方式改变
        confirmPayType(val, index) {
          this.payType = index; //先写死线上支付
          this.payTypeName = val;
          this.payTypeShow = false;
        },
        //进桶方式改变
        confirmPayBucketType(val, index) {
          //1:欠桶，2：还桶，3：买桶，4：杂桶兑换，5：旧桶换新
          this.payBucketType = index + 1;
          this.payBucketTypeName = val;
          this.payBucketTypeShow = false;
        },
        //进桶方式
        showPayBucketType() {
          this.payBucketTypeShow = true;
        },
        hidePayBucketType() {
          this.payBucketTypeShow = false;
        },
        //兑桶方式改变
        confirmExchangeBucketType(val, index) {
          //0：空桶兑换，1：换桶兑换
          this.exchangeBucketType = index;
          this.exchangeBucketTypeName = val;
          this.exchangeBucketTypeShow = false;
        },
        showExchangeBucketType() {
          this.exchangeBucketTypeShow = true;
        },
        hideExchangeBucketType() {
          this.exchangeBucketTypeShow = false;
        },
        chooseBucket() {
          this.bucketChooseShow = true;
        },
        //押桶选择回调
        bucketConfirm(item, exchangeBucketType) {
          this.exchangeBucketType = exchangeBucketType;
          this.bucketChooseShow = false;
          this.bucketData = [];
          item.forEach(el => {
            if (el.bucketChange !== 0 || el.emptyChange !== 0) {
              let obj = JSON.parse(JSON.stringify(el));
              this.bucketData.push(obj);
            }
          })
        },
        bucketCancel() {
          this.bucketChooseShow = false;
        },
        //水桶押金方式点击
        toggle(index) {
          this.$refs.checkboxes[index].toggle();
          if (this.payBucketTypeChkVal.indexOf(index) == -1) {
            this.payBucketTypeChkVal.push(index)
          } else {
            this.payBucketTypeChkVal.splice(this.payBucketTypeChkVal.indexOf(index), 1);
          }
        }
      }
    }

  </script>

  <style lang="less">
    @import '../../styles/variable.less';

    .order-confirm-container {
      height: 100vh;
      background: #f5f5f5;
    }

    .order-confirm__bg {
      background: linear-gradient(to bottom, #0086FC 60%, #f5f5f5);
      padding-bottom: 30px;
    }

    .order-confirm__back {
      background: unset;

      .van-icon-arrow-left,
      .van-nav-bar__text {
        color: #ffffff;
      }
    }

    .order-confirm__back[class*=van-hairline]::after {
      border: none;
    }

    .order-confirm__address {
      padding: 0 15px 50px 15px;
      color: #ffffff;

      &.order-confirm__address__nodata {
        margin-top: 30px;
        // font-weight: bold;
        font-size: 18px;
      }

      .order-confirm__address__sub {
        margin-bottom: 10px;
        font-size: 12px;
      }

      .order-confirm__address__main {
        display: flex;

        .order-confirm__address__text {
          margin-right: 5px;
          margin-bottom: 5px;
          font-size: 20px;
        }

        .order-confirm__address__icon {
          position: relative;
          top: 9px;
          font-size: 14px;
        }
      }

      .order-confirm__address__other {
        font-size: 14px;
      }
    }

    .address-info__content {
      position: relative;
      top: -70px;
      z-index: 10;
      width: 100%;
      overflow: auto;
      padding-bottom: 70px;

    }

    .address-info {
      margin: 10px;
      background: #fff;

      .payway .van-cell__value>span {
        color: @col-the;
      }

      .address-info__stationname {
        padding: 12px 10px;
        border-bottom: 1px solid #f5f5f5;
        font-size: 14px;
      }

      .address-info__product {
        padding: 0 10px;

        .address-info__product__item {
          padding: 10px 0;
          display: flex;

          .address-info__product__item__info {
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: space-between;

            .address-info__product__item__info__el {
              display: flex;
              justify-content: space-between;

              &.address-info__product__item__info__el_bucket {
                color: #999;
              }
            }
          }

          &.address-info__product__item_more {
            font-size: 12px;
            color: #666;
          }

          &:not(:last-child) {
            border-bottom: 1px solid #f5f5f5;
          }

          .address-info__product__el {
            padding: 0 5px;
            font-size: 12px;
          }

          .address-info__product__item__img {
            flex: 0 0 50px;
            height: 50px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 4px;
          }

          .address-info__product__item__name {
            flex: 0 0 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }

    .order-confirm__cal {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 40px;
      line-height: 40px;
      display: flex;
      z-index: 100;

      .order-confirm__detail {
        position: absolute;
        left: 0;
        bottom: 100%;
        padding-left: 10px;
        width: 100%;
        font-size: 14px;
        height: 28px;
        line-height: 28px;
        color: #999;
        background: #fff;
      }

      .order-confirm__total {
        display: flex;
        flex: 1;
        justify-content: flex-end;
        padding-right: 10px;
        background: #333;
        color: #fff;

        .order-confirm__total__detail {
          flex: 1;
          padding-left: 10px;
          font-size: 12px;
          color: #69bfff;

          i {
            position: relative;
            top: 3px;
            margin-right: 2px;
            font-size: 16px;
          }
        }

        .order-confirm__total__text {
          font-size: 14px;
        }
      }

      .order-confirm__btn {
        width: 120px;
        text-align: center;
        background: @col-the;
        color: #fff;
      }
    }

    .address-info__product__count {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      border-top: 1px solid #f5f5f5;
      padding: 8px 0;
      font-size: 12px;

      .address-info__product__count__discount {
        margin-right: 10px;
        margin-bottom: 1px;

        .price {
          color: @col-the;
        }
      }

      .address-info__product__count__total {
        .price {
          font-size: 18px;
          color: @col-the;
        }
      }
    }

    .order-address {
      position: fixed;
      top: 50%;
      bottom: 0;
      z-index: 100;
      width: 100%;
      overflow: auto;
      background: #fff;
    }

    .bucket-container {
      position: fixed;
      top: 35%;
      bottom: 0;
      z-index: 101;
      width: 100%;
      overflow: auto;
      background: #fff;
    }

    .bucket-data__type {
      font-size: 12px;
      color: #999;
      padding: 10px 0 10px 10px;
      border-bottom: 1px solid #f5f5f5;

      i {
        position: relative;
        top: 2px;
      }
    }

    .bucket-data__item {
      display: flex;
      font-size: 12px;
      padding: 10px;
      border-bottom: 1px solid @col-bb;

      .bucket-data__item__name {
        flex: 1;
      }

      .bucket-data__item__count {
        flex: 0 0 60px;
      }
    }

    .pay-bucket-tit {
      padding: 10px;
      font-size: 16px;
      text-align: center;
    }

    .station-send__rule {
      font-size: 12px;
      text-align: right;
      padding: 10px 0;
      color: #999
    }

  </style>
